<script setup>
    import {ref, reactive} from 'vue'
    import {useRouter, useRoute} from "vue-router"
    import orderApi from '@/api/order/order'
    import payApi from '@/api/order/pay'

    const router = useRouter()
    const route = useRoute()

    const data = reactive({
        address: {},
        cartItems: [],
        freight: 0,
        totalAmount: 0,
        loadingBtn: false,
        note: '',
        payWay: 'ali'
    })

    const getParam = () => {
        const cartIds = route.query.cartIds
        const ids = []
        if(cartIds){
            if(cartIds instanceof Array){
                ids.push(...cartIds)
            }else {
                ids.push(cartIds)
            }
        }

        let addressId = route.query.addressId
        if (!addressId) {
            //默认收货地址
            addressId = data.address.id
        }

        return {
            //购物车购买入参
            cartIds: ids,

            //立即购买入参
            productId: route.query.productId,
            skuId: route.query.skuId,
            quantity: route.query.quantity,

            addressId: addressId
        }
    }
    const initData = () => {
        orderApi.previewOrder(getParam()).then(response => {
            data.address = response.data.address
            data.cartItems = response.data.cartItems
            data.freight = response.data.freight
            data.totalAmount = response.data.totalAmount
        })
    }
    initData()

    const toAddressList = () => {
        router.push({
            name: 'ListAddress',
            query: route.query
        })
    }

    const payForm = ref(null)
    const handleSubmit = () => {
        data.loadingBtn = true

        let param = getParam()

        orderApi.createOrder({
            note: data.note,
            payWay: data.payWay,
            ...param
        }).then(response => {
            //得到订单编号，马上发起支付
            payApi.orderPayByOrderSn(response.data).then(response2 => {
                payForm.value.innerHTML = response2.data
                payForm.value.children[0].submit()
            })
        })
    }

</script>
<template>

	<van-nav-bar title="订单确认" left-text="返回" left-arrow @click-left="$router.go(-1)"/>

	<div class="order">
		<van-cell-group>
			<van-cell isLink icon="location-o" @click="toAddressList">

				<!--没有收货地址-->
				<template #title v-if="!data.address">
					<span>收货地址：</span>
					<span style="color: #999999">请填写收货地址！</span>
				</template>

				<!--有收货地址-->
				<template #title v-if="data.address">
					<span>收货地址：</span>
					<span>{{data.address.name}}</span>&nbsp
					<span>{{data.address.tel}}</span>
				</template>
				<template #label v-if="data.address">
					<span style="color: #999999">{{data.address.address}}</span>
				</template>

			</van-cell>
		</van-cell-group>

		<van-card
                v-for="cartItem in data.cartItems"
				:title="cartItem.productName"
				:price="cartItem.price"
				:num="cartItem.quantity"
				:thumb="cartItem.productImage"
		>
			<template #tags>
                <van-tag color="#c8c9cc" text-color="white" style="margin: 6px 6px 0 0;" v-for="it in cartItem.sku.split(';')">{{it}}</van-tag>
			</template>
		</van-card>

		<van-cell-group style="margin-top: 8px;">
			<van-cell title="运费">
				<span class="red">￥{{data.freight}}</span>
			</van-cell>
			<van-field placeholder="请输入备注" label="订单备注" v-model="data.note"></van-field>
		</van-cell-group>

		<van-cell-group style="margin-top: 8px;">
			<van-radio-group v-model="data.payWay">
				<van-cell>
					<van-radio name="ali">
						<van-icon name="alipay"/>
						支付宝
					</van-radio>
				</van-cell>
				<van-cell>
					<van-radio name="wx" disabled>
						<van-icon name="wechat"/>
						微信支付
					</van-radio>
				</van-cell>
			</van-radio-group>
		</van-cell-group>

		<van-submit-bar
				:price="data.totalAmount * 100"
				buttonText="提交订单"
				:disabled="!data.address"
				:loading="data.loadingBtn"
				@submit="handleSubmit"
		/>
	</div>

    <div ref="payForm">

    </div>

</template>

<style scoped lang="scss">
</style>
